<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
	<title>湖南省自来水公司营销管理信息系统</title> 
	
	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />	
	
	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />
	
	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">

</head> 
 
<body> 

<div id="wrapper">
	<div id="header">
		
		<div class="content_pad">
			<h1><a href="../workspace.html">湖南省自来水公司营销管理信息系统</a></h1>
			
			<ul id="nav">
				
				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-wrench"></span>业扩工程</a>
					
					<div class="nav_menu">			
						<ul>
							<li><a href="../page/be__request.html">01 用户申请</a></li>
							<li><a href="../page/be__audit.html">02 初步审核</a></li>
							<li><a href="../page/be__pay.html">03 交施工费</a></li>
							<li><a href="../page/be__billclear.html">04 水费清算</a></li>
							<li><a href="../page/be__contract.html">05 供水协议</a></li>
							<li><a href="../page/be__working.html">06 施工竣工</a></li>
							<li><a href="../page/be__open.html">07 通水停水</a></li>
							<li><a href="../page/be__save.html">08 档案存档</a></li>
							<li><a href="../page/be_order.html">工单管理</a></li>
							<li><a href="../page/be_abort.html">终止工单</a></li>
							<li><a href="../page/be_reportProgress.html">业扩工程进度</a></li>
							<li><a href="../page/be_reportMoney.html">业扩收费报表</a></li>
						</ul>
						
					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-person"></span>用户管理</a>
					
					<div class="nav_menu">			
						<ul>
							<li><a href="../page/user_search.html">用户查询</a></li>	
							<li><a href="../page/user_add.html">快捷新户</a></li>	
							<li><a href="../page/user_changeName.html">快捷过户</a></li>
							<li><a href="../page/user_changeBank.html">快捷代扣</a></li>
							<li><a href="../page/user_changeMeter.html">快捷换表</a></li>
							<li><a href="../page/user_changeFormula.html">快捷重签</a></li>
							<li><a href="../page/user_delete.html">快捷销户</a></li>
							<li><a href="../page/user_reportShortcut.html">快捷操作记录</a></li>
							<li><a href="../page/user_docNum.html">档案号管理</a></li>
							<li><a href="../page/user_sendMsg.html">短信群发</a></li>
						</ul>
						
					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-pencil"></span>抄表管理</a>
					
					<div class="nav_menu">			
						<ul>
							<li><a href="../page/rd_volume.html">表册管理</a></li>	
							<li><a href="../page/rd_init.html">抄表初始化</a></li>	
							<li><a href="../page/rd_task.html">任务分配</a></li>	
							<li><a href="../page/rd_enter.html">抄表录入</a></li>	
							<li><a href="../page/rd_audit.html">抄表审核</a></li>
							<li><a href="../page/rd_reportReading.html">抄表情况查询</a></li>	
							<li><a href="../page/rd_reportVolumeReading.html">抄表统计报表</a></li>	
							<li><a href="../page/rd_reportZero.html">零吨位用户查询</a></li>	
							<li><a href="../page/rd_reportMaxValue.html">最大码值修正记录</a></li>
							<li><a href="../page/rd_reportCPreAmount.html">底码修正记录</a></li>	
							<li><a href="../page/rd_reportMeterCheck.html">水表周检报表</a></li>
						</ul>
						
					</div>
				</li>
				
				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-star"></span>收费管理</a>
					
					<div class="nav_menu">			
						<ul>
							<li><a href="../page/pay_window.html">窗口收费</a></li>	
							<li><a href="../page/pay_batch.html">批量收费</a></li>
							<li><a href="../page/pay_invoiceReprint.html">发票补开/作废</a></li>	
							<li><a href="../page/pay_reportDebts.html">欠费报表</a></li>	
							<li><a href="../page/pay_reportPay.html">收费情况报表</a></li>	
							<li><a href="../page/pay_reportMonthRecycle.html">月资金回收情况报表</a></li>	
							<li><a href="../page/pay_reportBalance.html">用户预收情况报表</a></li>	
							<li><a href="../page/pay_reportWaterType.html">各类用水统计总表</a></li>
						</ul>
						
					</div>
				</li>
				
				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-script"></span>发票管理</a>
					
					<div class="nav_menu">			
						<ul>
							<li><a href="../page/inv_invoiceManage.html">发票总表</a></li>
							<li><a href="../page/inv_invoiceIn.html">发票入库</a></li>	
							<li><a href="../page/inv_invoiceOut.html">发票出库</a></li>
							<li><a href="../page/inv_invoiceArchive.html">发票交票</a></li>
							<li><a href="../page/inv_invoiceReportOut.html">发票出库情况查询</a></li>	
							<li><a href="../page/inv_invoiceReportEmp.html">收费人员发票查询</a></li>	
							<li><a href="../page/inv_invoiceReportArchive.html">发票交票情况查询</a></li>	
							<li><a href="../page/inv_invoiceReportUse.html">发票使用情况查询</a></li>	
							<li><a href="../page/inv_invoiceReportMoneySum.html">销账汇总报表</a></li>	
							<li><a href="../page/inv_invoiceReportMoneyDetail.html">销账明细报表</a></li>	
						</ul>
					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-gear"></span>系统设置</a>
					
					<div class="nav_menu">			
						<ul>
							<li><a href="../page/sys_area.html">抄表辖区</a></li>	
							<li><a href="../page/sys_meterType.html">水表型号</a></li>	
							<li><a href="../page/sys_dept.html">部门管理</a></li>	
							<li><a href="../page/sys_emp.html">员工管理</a></li>	
							<li><a href="../page/sys_menupower.html">菜单权限设置</a></li>	
							<li><a href="../page/sys_areapower.html">辖区权限设置</a></li>	
							<li><a href="../page/sys_waterType.html">用水类型设定</a></li>	
							<li><a href="../page/sys_surcharge.html">附加费设定</a></li>	
							<li><a href="../page/sys_flow.html">流程配置</a></li>	
						</ul>
						
					</div>
				</li>
				
				<li class="nav_current nav_dropdown nav_icon_only">
					<a href="javascript:;">&nbsp;</a>
					
					<div class="nav_menu">
						<ul>
							<li><a href="../workspace.html">我的工作台</a></li>
							<li><a href="../page/sys_pwd.html">修改密码</a></li>
							<li><a href="/autoWater/logout">退出系统</a></li>
						</ul>
					</div> <!-- .menu -->
				</li>
			</ul>
		</div> <!-- .content_pad -->
		
	</div> <!-- #header -->	
	
	<div id="masthead">
		<div>
			<span id="pagetitle"><a href="javascript:;">用户申请</a></span>
			<span id="welcome_span">欢迎回来，{{username.empName}}</span>
		</div>
	</div> <!-- #masthead -->	
	
	<div id="content" class="xgrid">
		
 		
		<div class="x12">
			
			<h2>
				用户申请 - 办理过户业务
				<a style="float:right" href="javascript:history.back(-1);">返回</a>
			</h2>
			
			<div class="tab_container">
				<ul class="tabs"> 
					<li><a href="#tab1">申请表</a></li> 
					<li><a href="#tab2">原用户</a></li>
				</ul> 
				<div class="tab_content_container">
					<div id="tab1" class="tab_content">
						<table width="100%">
							<thead>
							<tr>
								<th width="60"></th>
								<th width="220"></th>
								<th width="60"></th>
								<th></th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td>用户名称</td>
								<td><input type="text" v-model="beOrder.userName"/></td>
								<td>用户类型</td>
								<td><select style="width:158px;" v-model="beOrder.userType">
									<option value="公户">公户</option>
									<option value="私户">私户</option>
								</select>
								</td>
							</tr>
							<tr>
								<td>联系人</td>
								<td><input type="text" v-model="beOrder.linkMan"/></td>
								<td>联系电话</td>
								<td><input type="text" v-model="beOrder.phone"/></td>
							</tr>
							<tr>
								<td>用户地址</td>
								<td colspan="3"><input size="68" type="text" v-model="beOrder.address"/></td>
							</tr>
							<tr>
								<td>用水量</td>
								<td><input type="text" v-model="beOrder.maxAmount"/></td>
								<td>申请表径</td>
								<td><select style="width:158px;" v-model="beOrder.meterTypeID">
									<option value="0">请选择</option>
									<option v-for="m in meterType" :value="m.id">{{m.meterTypeName}}</option>
								</select>
								</td>
							</tr>
							<tr>
								<td>房屋层次</td>
								<td><input type="text" v-model="beOrder.houseHeight"/></td>
								<td>接水用途</td>
								<td><input type="text" v-model="beOrder.useTarget"/></td>
							</tr>
							<tr>
								<td>备注说明</td>
								<td colspan="3"><input size="68" type="text" v-model="beOrder.userRemark"/></td>
							</tr>
							</tbody>
						</table>
					</div>
					<div id="tab2" class="tab_content">
						<div class="form label-inline uniform">


							<div class="field">原用户编码<input type="text" v-model="OldUserNo"/> <button class="btn btn-small" @click="getUser">确定</button></div>
							<div class="field">原用户姓名<input type="text" disabled="disabled" v-model="beorder1.userName"/></div>
							<div class="field">原用户电话<input type="text" disabled="disabled" v-model="beorder1.phone"/></div>
							<div class="field">原用户表径<input type="text" disabled="disabled" v-model="beorder1.syMetertype.meterTypeName"/></div>
							<div class="field">原用户地址<input type="text" disabled="disabled" v-model="beorder1.address" size="50" /></div>



						</div>
					</div>
					
				</div>
			</div>
	
	
			
		</div> <!-- .x12 -->
		
		<div class="centerButtons">
			<button class="btn" @click="add">办理</button>
			<button class="btn btn-grey" onClick="history.back(-1);">返回</button>
		</div>
		
	</div> <!-- #content -->
	
	<div id="footer">		
		<div class="content_pad">			
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->
	
</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/vue3.js"></script>

<script type="text/javascript">
	const app = Vue.createApp({
		data() {
			return {
				username:JSON.parse(sessionStorage.getItem("user")),//登录的用户
				meterType: [],//水表类型
				beOrder: {
					meterTypeID:'0',//水表类型
					UserType:'私户',//用户类型
					lastEditEmp:"",//最后操作人
				},//工程单
				BeOrderUser:[],//工单用户详表
				beorder1:{
					syMetertype:{meterTypeName:'N50'}
				},
				OldUserNo:'',
			}
		},
		computed: {
			meterTypeName() {
				return this.order.syMetertype.meterTypeName;
			},
		},
		mounted(){
			this.csh();
		},
		methods:{
			//初始化
			csh(){
				Dashboard.init ();
				const urlParams = new URLSearchParams(window.location.search);
				const orderString = urlParams.get('order');
				if(orderString){
					axios.get("/beOrderUser/byName?name="+orderString).then((res)=>{
						if (res.data.code === 503) {
							alert(res.data.errorMessage);
						} else {
							this.OldUserNo=res.data.data[0].userNo;
							this.getUser();
						}
					})
				}
				this.beOrder.lastEditEmp=this.username.id
				axios.get("/syMeterType").then((res) => {
					if (res.data.code === 503) {
						alert(res.data.errorMessage);
					} else {
						this.meterType = res.data.data;
					}
				});
				//选项卡初始化
				$('.tab_container').tabs ( );

				// $("#tab1").hide();
				// $("#tab2").show();
				// var tab=  $('.tab_container').tabs ('getSelected');
				// alert( $('.tab_container').tabs ('getTabIndex',tab));
			},
			//添加
			add(){
					this.beOrder.orderType=3;
					this.beOrder.oldUserNo=this.OldUserNo;
					this.beOrder.oldUserName=this.beorder1.userName;
					this.beOrder.oldUserAddr=this.beorder1.address;
					this.beOrder.oldUserPhone=this.beorder1.phone;
					this.beOrder.oldMeter=this.beorder1.syMetertype.meterTypeName;
					axios.post("/beOrder/new",this.beOrder).then((res)=> {
						if (res.data.code === 503) {
							alert(res.data.errorMessage);
						} else {
							alert("过户成功!")
							location.href="/page/be__audit.html"
						}
					})
			},
			//获取原用户
			getUser(){
				axios.get("/beOrder/getUser?userNo="+this.OldUserNo).then((res)=>{
					if(res.data.code===503){
						alert("没有当前工单或者此工单已是过户状态")
					}else{
						this.beOrder=res.data.data;
						if(this.beOrder.oldUserNo!="" || this.beOrder.oldUserNo!=null){
							this.beorder1=Object.assign({}, this.beOrder);
							this.beorder1.userName=this.beOrder.oldUserName;
							this.beorder1.phone=this.beOrder.oldUserPhone;
							this.beorder1.address=this.beOrder.oldUserAddr;
							this.beorder1.syMetertype.meterTypeName=this.beOrder.oldMeter;
						}else {
							this.beorder1 = Object.assign({}, this.beOrder);
						}
					}
				})
			},
			//获取所有用户
			getAllUser(){
				var inputElements = document.querySelectorAll('.sj input');
				var inputValues = [];
				inputElements.forEach(element =>{
					inputValues.push(element.value);
				});
				console.log(inputElements)
				let arr = ["userName","phone","SMSPhone","address"];
				for (let i = 0; i <inputValues.length; i+=arr.length) {
					const obj = {};
					for (let j = 0; j < arr.length; j++) {
						obj[arr[j]]=inputValues[i+j];
					}
					this.BeOrderUser.push(obj)
				}
			}
		}
	})
	app.mount('#wrapper');
</script>

</body> 
 
</html>